<template>
  <div class="MultiAttributeTable relative">
    <div class="absolute -top-10 right-0" v-if="!permission_all">
      <el-button
        type="primary"
        @click="getCreatSku"
        v-if="handleType == 'add' && !form.goods_sku[0]?.is_combination"
        >单属性SKU生成</el-button
      >
      <el-button
        type="primary"
        @click="editOpen"
        v-if="handleType == 'add' && !form.goods_sku[0]?.is_combination"
        >编辑多属性</el-button
      >
      <el-button
        type="primary"
        @click="createSKU"
        v-if="
          (handleType == 'edit' || handleType == 'copy' || handleType == 'createSKU') &&
          !form.goods_sku[0]?.is_combination
        "
        >新增SKU</el-button
      >
    </div>

    <el-table border ref="xTable" :data="form.goods_sku">
      <el-table-column prop="main_attribute" label="主属性" width="90">
        <template #default="{ row, $index }">
          <template v-if="handleType == 'view'">{{
            row.main_attribute == 1 ? "主属性" : "--"
          }}</template>
          <template v-else>
            <el-radio
              v-model="row.main_attribute"
              :label="1"
              name="1"
              size="large"
              @click.prevent="radioChange($event, $index)"
              :disabled="disabled"
              >主属性</el-radio
            >
          </template>
        </template>
      </el-table-column>
      <el-table-column type="attr_img" label="主图" width="90">
        <template #header>
          <div>主图</div>
        </template>
        <template #default="{ row, $index }">
          <template v-if="row.attr_img">
            <div class="mt-2 relative">
              <VImage
                :src="row.attr_img_watermark"
                :width="52"
                :height="52"
                :preview="false"
              >
              </VImage>
            </div>
          </template>
          <div v-else class="uploadBox">未上传</div>
        </template>
      </el-table-column>
      <el-table-column prop="sku" label="SKU" width="200">
        <template #default="{ row }">
          {{ row.sku || row.custom_sku }}
        </template>
      </el-table-column>
      <el-table-column prop="custom_sku" width="200" label="自定义SKU">
        <template #header>
          <div>自定义SKU</div>
        </template>
        <template #default="{ row }">
          <template v-if="handleType == 'view'">{{ row.custom_sku }}</template>
          <template v-else>
            <el-input
              v-model="row.custom_sku"
              @blur="blurCustomSKU($event)"
              :disabled="disabled"
            ></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="sku_cn_title"
        label="SKU名称"
        :edit-render="{}"
        minWidth="220"
      >
        <template #header>
          <div class="flex justify-between">
            <div>SKU中文名<span class="text-red-500 text-lg">*</span></div>
            <el-button
              v-if="handleType != 'view'"
              type="primary"
              link
              @click="editSKU"
              :disabled="disabled"
              >编辑</el-button
            >
          </div>
        </template>
        <template #default="{ row, $index }" v-if="handleType != 'view'">
          <el-input
            :ref="inputRefs[$index]"
            :rows="2"
            type="textarea"
            v-model="row.sku_cn_title"
            placeholder="请输入"
            @blur="changeSKUTitle(row, 1)"
            :disabled="disabled"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="sku_en_title"
        label="SKU名称"
        :edit-render="{}"
        minWidth="220"
      >
        <template #header>
          <div class="flex justify-between">
            <div>SKU英文名<span class="text-red-500 text-lg">*</span></div>
            <el-button
              v-if="handleType != 'view'"
              type="primary"
              link
              @click="translateOne('en')"
              :loading="loading"
              :disabled="disabled"
              >翻译</el-button
            >
          </div>
        </template>
        <template #default="{ row }" v-if="handleType != 'view'">
          <el-input
            type="textarea"
            :rows="2"
            v-model="row.sku_en_title"
            placeholder="请输入"
            @blur="changeSKUTitle(row, 2)"
            :disabled="disabled"
          ></el-input>
        </template>
      </el-table-column>
      <template v-if="arrAttributeList.length > 0">
        <el-table-column
          width="100"
          :label="item.name || item.value"
          v-for="(item, index) in arrAttributeList"
          :key="index"
        >
          <template #default="{ row }">
            <el-input
              v-model="row.sku_specification.attributes[item.key]"
              :disabled="disabled"
              v-if="handleType != 'view'"
            ></el-input>
            <span v-else>
              {{ row.sku_specification.attributes[item.key] }}
            </span>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        label="操作"
        fixed="right"
        width="190"
        show-overflow
        v-if="handleType != 'view'"
      >
        <template #default="{ row, $index }">
          <el-button
            v-if="!row.id"
            type="danger"
            link
            @click="del(row, $index)"
            :disabled="disabled"
            >删除</el-button
          >
          <slot name="handle" :row="row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <Edit ref="editRef" @changeSKU="changeSKU"></Edit>
    <EditSKU ref="editSKURef"></EditSKU>
    <addSKU ref="addSKURef" @push="pushSKU"></addSKU>
  </div>
</template>

<script setup name="MultiAttributeTable">
import VImage from "@/components/Image/index.vue";
import Edit from "./edit.vue";
import EditSKU from "./editSKU.vue";
import { reactive, inject, onMounted, nextTick, watch, computed, ref, toRefs } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getSpu } from "../../api";
import { translationBatch } from "@/api/index";
import useCommonStore from "@/store/modules/common";
import { storeToRefs } from "pinia";
import { deepClone } from "@/utils/index.js";
import { scrollToError } from "@/hooks/formScroll.js";
import addSKU from "./addSKU.vue";
const commonStore = useCommonStore();
const { languageOptions } = storeToRefs(commonStore);

const emit = defineEmits(["update:modelValue", "change"]);
let options = reactive(inject("options"));
let handleType = reactive(inject("handleType"));
let formData = reactive(inject("form"));
let sku_product_type = reactive(inject("sku_product_type")) || "";

const creatSkuInfo = reactive(inject("creatSkuInfo"));
const editRef = ref(null);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
  permission_all: {
    type: Boolean,
    default: false,
  },
});

const { permission_all } = toRefs(props);

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/multiattribute-info"))
  );
});
// 表格属性
const form = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const arrAttributeList = computed(() => {
  if (form.value.goods_sku.length > 0) {
    let data = form.value.goods_sku[0];
    if (!data.sku_specification || data.sku_specification.length == 0) return [];
    return data.sku_specification.header;
  } else {
    return [];
  }
});

const initSpecificationSKU = () => {
  let array = [
    {
      is_relation_img: 0,
      group_name: "颜色",
      loading: false,
      show: true,
      valueName: "",
      values: [
        {
          language_name: "中文",
          language_id: 1,
          language_code: "zh-chs",
          show: true,
          name: "颜色",
          language_values: [
            {
              language_id: 1,
              group: 1,
              spu_id: form.value.spu,
              name: "颜色",
              value: "如图所示",
            },
          ],
        },
        {
          language_name: "英语",
          language_code: "en",
          language_id: 2,
          show: true,
          name: "color",
          language_values: [
            {
              language_id: 2,
              group: 1,
              spu_id: form.value.spu,
              name: "颜色",
              value: "AsShown",
            },
          ],
        },
      ],
    },
    {
      is_relation_img: 0,
      group_name: "尺寸",
      loading: false,
      show: false,
      valueName: "",
      values: [
        {
          language_name: "中文",
          language_id: 1,
          language_code: "zh-chs",
          show: true,
          name: "尺寸",
          language_values: [
            {
              language_id: 1,
              group: 1,
              spu_id: form.value.spu,
              name: "尺寸",
              value: "",
            },
          ],
        },
        {
          language_name: "英语",
          language_code: "en",
          language_id: 2,
          show: true,
          name: "尺寸",
          language_values: [
            {
              language_id: 2,
              group: 1,
              spu_id: form.value.spu,
              name: "尺寸",
              value: "",
            },
          ],
        },
      ],
    },
  ];
  let arr =
    languageOptions.value &&
    languageOptions.value.filter((item) => !(item.id === 1 || item.id === 2));
  arr &&
    arr.forEach((op) => {
      array.forEach((i) => {
        i.values.push({
          group_name: op.name,
          language_code: op.short_name,
          language_name: op.name,
          language_id: op.id,
          show: op.id == 10 ? true : false,
          name: "",
          language_values: [
            {
              language_id: op.id,
              group: 1,
              spu_id: form.value.spu,
              name: op.name,
              value: "",
            },
          ],
        });
      });
    });
  return array;
};

const editOpen = () => {
  if (formData.value.spu_category.length == 0) {
    return ElMessage.warning("请先选择产品分类");
  }
  nextTick(() => {
    editRef.value && editRef.value.open();
  });
};

// 编辑多属性
const changeSKU = (data, recreate, addOmit) => {
  getSpu(data).then((res) => {
    const skus = res.data.skus;
    const goods_sku = formData.value.goods_sku;

    if ((goods_sku && goods_sku.length == 0) || recreate || !formData.value.id) {
      form.value.goods_sku = initAttribute(skus);
    } else if (addOmit) {
      const result_sku = initAttribute(skus);
      matchAndAdd(result_sku, goods_sku);
    } else {
      if (goods_sku.length > skus.length) {
        form.value.goods_sku = matchAndGenerate(goods_sku, skus);
      } else if (goods_sku.length <= skus.length) {
        const result_sku = goods_sku.map((i) => {
          skus.forEach((j) => {
            if (i.sku == j.sku) {
              i.sku_specification = {
                ...j.cn,
                relation: j.relation,
              };
              i.sku_product_type = Number(sku_product_type.value);
            }
          });
          return i;
        });
        form.value.goods_sku = result_sku;
      }
    }

    if (handleType.value == "createSKU") {
      const file = creatSkuInfo.value.attachments;
      const free = creatSkuInfo.value.product_fee;
      const flage = free?.some((item) => item.is_default == 1);
      let freeData = [];
      if (creatSkuInfo.value?.is_operation_check) {
        freeData = free?.filter((item) => item.check_status == 1);
      } else {
        freeData = free;
      }
      const freeArr = freeData?.map((it, i) => {
        const remark = it.suggest_prepare_count
          ? "备货量：" + it.suggest_prepare_count + "\n" + it?.remark
          : it?.remark || null;
        return {
          currency_id: it?.currency_id || null,
          currency_name: it?.currency_name || null,
          header_channel_id: it?.head_channel_id || null,
          header_channel_name: it?.head_channel || null,
          is_default: flage ? it?.is_default : i == 0 ? 1 : 0,
          platform_id: it?.platform_id || null,
          platform_name: it?.platform_id_code || null,
          remark,
          sales_price: it?.selling_price || null,
          site_code: it?.site_text || null,
          competitor_link: it?.product_link || null,
          operation_user_ids: it.specified_operation_user_id
            ? [it?.specified_operation_user_id]
            : it?.operation_user_id
            ? [it?.operation_user_id]
            : [],
          operation_user_ids_text: it.specified_operation_user_id_text
            ? [it?.specified_operation_user_id_text]
            : it?.operation_user_id_text
            ? [it?.operation_user_id_text]
            : [],
          header_logistic_channel_id: it.head_logistic_channel_id || null,
          header_logistic_channel: it.head_logistic_channel || null,
          header_time: it.head_time,
          header_freight: it.head_freight,
          tail_shipping_type_id: it.tail_channel_id,
          tail_shipping_type: it.tail_channel,
          tail_logistic_channel_id: it.tail_logistic_channel_id || null,
          tail_logistic_channel: it.tail_logistic_channel || null,
          tail_time: it.tail_time,
          tail_freight: it.tail_freight,
          site_country_code: it.site_country_code || null,
          estimated_product_level: it.product_level,
          destination_warehouse_id: it.destination_warehouse_id,
        };
      });

      form.value?.goods_sku?.forEach((item) => {
        item.attr_img = creatSkuInfo.value?.product_main_img || null;
        item.goods_sku_recommended_platform = freeArr;
        item.goods_sku_remark.dev_remark = creatSkuInfo.value?.development_remark || null;
        item.goods_sku_remark.dev_remark_appendix = file;
        item.developer_id = creatSkuInfo.value?.developer_id;
        item.sku_cn_title = creatSkuInfo.value?.product_title;
        item.packing_qty = creatSkuInfo.value?.packing_quantity;
        if (creatSkuInfo.value?.product_main_img) {
          item.goods_sku_gallery[0].contents[0].values.push({
            image_link: creatSkuInfo.value?.product_main_img,
            image_name: creatSkuInfo.value.product_main_img.split("/").pop(),
            image_source: 5,
            image_source_text: "其他",
            image_type: 3,
            image_type_text: "产品图片",
          });
        }
        changeSKUTitle(item, 1);
      });
    }

    nextTick(() => {
      editRef.value && editRef.value.close();
      emit("change");
    });
  });
};

// 初始化多属性
const initAttribute = (skus, is_main = true) => {
  const resultSkus = skus.map((i) => {
    i.id = "";
    i.sku_product_type = Number(sku_product_type.value) || i.sku_product_type || 1;
    i.is_transparent_plan = i.is_transparent_plan || 0;
    i.packing_qty_size_cm = i.packing_qty_size_cm || {};
    i.packing_size_cm =
      i.packing_size_cm || form.value.productAttribute?.packing_size_cm || {};
    i.product_size_cm = i.product_size_cm || {};
    const cn = i.cn;
    i.sku_specification = i.sku_specification || {
      ...cn,
      relation: i.relation,
    };
    delete i.cn;
    i.custom_sku = i.custom_sku || i.sku || "";
    // i.sku = ''
    i.main_img = i.main_img || "";
    i.attr_img = i.attr_img || "";
    i.main_attribute = i.main_attribute || 0;
    i.purchase_price =
      i.purchase_price || form.value.productAttribute?.purchase_price || "";
    i.gross_weight_g =
      i.gross_weight_g || form.value.productAttribute?.gross_weight_g || "";
    i.net_weight_g = i.net_weight_g || "";
    i.packing_weight_g = i.packing_weight_g || "";
    i.packing_qty = i.packing_qty || "";
    i.packing_gross_weight_kg = i.packing_gross_weight_kg || "";
    i.need_ce = i.need_ce || "0";
    i.latest_purchase_price = i.latest_purchase_price || "";
    i.goods_sku_title = i.goods_sku_title || [];
    i.sales_status = 1;
    i.supply_status = 1;
    i.goods_sku_attr_img = i.goods_sku_attr_img || [];
    i.sku_cn_title = i.sku_cn_title || "";
    i.sku_en_title = i.sku_en_title || "";
    i.sample_purchase_type = 1;
    // 当前原型没有后台必传的
    i.warehouse_id = 1;
    i.warehouse_status = 1;
    i.sku_sales_status = 2;
    i.product_status = 1;
    i.sai_he_sku = i.sai_he_sku || "";
    i.lowest_purchase_price = "";
    i.min_order = "11";
    i.purchase_days =
      i.purchase_days || form.value.productAttribute?.purchase_days || "1";
    i.purchase_status = i.purchase_status || 2;
    // SKU 基础信息
    i.goods_sku_sales_info = {
      // id: '',
      // sku_id: '',
      brand_id: null,
      brand_type: 1,
      suggested_sales_price: "",
      currency: "",
      currency_id: 158,
      currency_name: "USD",
      warehouse_id: "",
      logistics_attributes: "",
      suggested_header_channel: "",
      custom_specification: [{ name: "", value: "" }],
      competing_products_link: [""],
      spu_unit: "",
      packaging_method: "",
      plug_specification: "",
      is_new_product: 1,
      is_seasonal_product: 0,
    };
    i.goods_sku_authentication = [
      {
        country_id: "",
        country_name: "",
        authentication_type: "",
        authentication_name: "",
      },
    ];
    i.goods_sku_sell_month = [
      {
        country: [],
        hot_sell_start_month: "",
        hot_sell_end_month: "",
        remark: "",
      },
    ];
    i.goods_sku_prohibited_sales = [
      {
        platform_name: "",
        site_code: "",
        platform_id: "",
      },
    ];
    // 产品图片设置
    i.goods_sku_gallery = initGallery();
    // 备注信息
    i.goods_sku_remark = {
      dev_remark: form.value.productAttribute?.dev_remark || "",
      // dev_remark_appendix: form.value.productAttribute?.dev_remark_appendix || [],
      edit_remark: "",
      purchase_remark: "",
      inspection_remark: "",
      packaging_remark: "",
    };
    // 证书文件
    i.goods_sku_certificate = [];
    // 报关信息
    i.goods_sku_customs = {
      cn_name: "",
      en_name: "",
      purpose: "",
      cn_material: "",
      en_material: "",
      declare_elements: "",
      customs_code: "",
      tax_rebate_rate: "",
      declare_price_usd: "",
      declare_unit: "",
      declare_link: "",
      declare_link_price_eur: "",
    };
    // 商品描述
    i.goods_sku_description = [
      {
        spu_title: "",
        detail_description: "",
        text_description: "",
        highlights_description: "",
        package_description: "",
        mobile_description: "",
        keyword: "",
        language_id: 1,
        language: "中文",
        language_code: "zh",
        show: true,
      },
      {
        spu_title: "",
        detail_description: "",
        text_description: "",
        highlights_description: "",
        package_description: "",
        mobile_description: "",
        keyword: "",
        language_id: 2,
        language: "英语",
        language_code: "en",
        show: true,
      },
    ];
    // 供应商
    i.goods_sku_supplier = [];
    // 关联辅料
    i.goods_sku_accessories = [];
    // 推荐平台站点
    i.goods_sku_recommended_platform = [];
    i.developer_id = window.userInfo.user.user_id;
    i.product_manage_id = window.userInfo.user.user_id;
    i.is_custom_product = 2;
    i.goods_sku_relation_old = {
      is_change_sku: 2,
    };
    i.is_relation_sku = true;
    // i.disabled_relation = false;
    return i;
  });
  if (is_main) {
    skus[0].main_attribute = 1;
  }
  return resultSkus;
};

// 数组遍历不存在增加
const matchAndAdd = (array1, array2) => {
  for (var i = 0; i < array1.length; i++) {
    var isDuplicate = false;
    for (var j = 0; j < array2.length; j++) {
      if (array1[i].custom_sku === array2[j].custom_sku) {
        isDuplicate = true;
        break;
      }
    }
    if (!isDuplicate) {
      array2.push(array1[i]);
    }
  }
  return array2;
};

// 数组遍历返回匹配值
const matchAndGenerate = (array1, array2) => {
  var result = [];
  for (var i = 0; i < array1.length; i++) {
    for (var j = 0; j < array2.length; j++) {
      if (array1[i].sku === array2[j].sku) {
        result.push(array2[j]);
        break;
      }
    }
  }
  return result;
};

// 初始化默认产品图片一个标签
const initGallery = (list) => {
  let newList = list || toRaw(options.value);
  let obj = {
    custom_tag: "默认",
    spu: form.spu,
    spu_category: form.value.spu_category,
    spu_cn_title: form.value.spu_cn_title,
    contents: [],
  };
  newList["gallery.GoodsSkuGalleryContents"]?.[0].imageTypeText.forEach((element, e) => {
    obj.contents.push({
      label: element.label,
      image_type: element.value,
      showType: 0,
      values: [],
    });
  });
  return [obj];
};

const radioChange = (val, rowIndex) => {
  if (disabled.value) return;
  form.value.goods_sku = form.value.goods_sku.map((item, index) => {
    if (index == rowIndex) {
      item.main_attribute = 1;
      form.value.main_sku_id = item.sku_id;
    } else {
      item.main_attribute = 0;
    }
    return item;
  });
};

const del = (item, index) => {
  ElMessageBox.confirm("是否删除SKU，删除后，对应SKU分页中的信息将清空?", "删除SKU", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      form.value.goods_sku.splice(index, 1);
      emit("change");
    })
    .catch(() => {});
};

const editSKURef = ref();
const editSKU = () => {
  if (form.value.goods_sku.length == 0) return;
  editSKURef.value.open();
};

const loading = ref(false);
const translateOne = (language_code) => {
  let arr = [];
  form.value.goods_sku.forEach((i) => {
    arr.push(i.sku_cn_title);
  });
  let param = {
    texts: {
      [language_code]: arr,
    },
    use_proxy: true,
  };
  loading.value = true;
  translationBatch(param)
    .then((res) => {
      form.value.goods_sku.forEach((item, index) => {
        item.sku_en_title = res.data[language_code][index];
        item.goods_sku_title.forEach((k) => {
          if (k.language_code == language_code) {
            k.title = res.data[language_code][index];
          }
        });
      });
      ElMessage.success("翻译成功");
    })
    .finally(() => {
      loading.value = false;
    });
};

const changeSKUTitle = (row, language_id) => {
  if (row.sku_cn_title.includes("透明计划") && row.is_transparent_plan == 0) {
    ElMessage.warning("SKU中文名含有‘透名计划’字样，是否透明计划已自动改为‘是’");
    row.is_transparent_plan = 1;
  }
  if (row.goods_sku_title?.length) {
    row.goods_sku_title.forEach((i) => {
      if (i.language_id == language_id) {
        i.title = language_id == 1 ? row.sku_cn_title : row.sku_en_title;
      }
    });
  } else {
    editSKURef.value.initSKU(row.sku_cn_title, row.sku_en_title);
  }
};

const validate = () => {
  return new Promise((resolve, reject) => {
    if (form.value.goods_sku.length == 0) {
      ElMessage.warning("至少生成一条SKU");
      scrollToError(document.querySelector("#multiattribute"));
      reject(false);
      return;
    }
    for (let i = 0; i < form.value.goods_sku.length; i++) {
      if (!form.value.goods_sku[i].sku_cn_title) {
        ElMessage.warning(`请填写第${i + 1}条SKU中文名`);
        scrollToError(document.querySelector("#multiattribute"));
        reject(false);
        return;
      }
      if (!form.value.goods_sku[i].sku_en_title) {
        ElMessage.warning(`请填写第${i + 1}条SKU英文名`);
        scrollToError(document.querySelector("#multiattribute"));
        reject(false);
        return;
      }
    }
    resolve(true);
  });
};

const getCreatSku = () => {
  if (formData.value.spu_category.length == 0) {
    return ElMessage.warning("请先选择产品分类");
  }
  formData.value.goods_spu_specification = initSpecificationSKU();
  let newList = deepClone(formData.value.goods_spu_specification);
  let list = newList
    .filter((k) => {
      if (k.show != false) {
        return k;
      }
    })
    .map((i) => {
      i.values.forEach((j) => {
        if (j.language_id == 2) {
          i.en_value = j.language_values.map((k) => k.value);
          i.first_value = j.language_values.map((k) => k.first_value);
          i.en_name = j.name;
        }
        if (j.language_id == 1) {
          i.cn_value = j.language_values.map((k) => k.value);
          i.cn_name = j.name;
        }
      });
      i.first_value = i.first_value?.length ? i.first_value : i.en_value;
      i.name = i.group_name;
      delete i.values;
      return i;
    });
  let data = {
    spu: formData.value.spu,
    productCategory: formData.value.spu_category,
    attributes: list,
    recreate: false,
  };
  changeSKU(data, false, false);
};

// 添加SKU
const addSKURef = ref();
const createSKU = () => {
  addSKURef.value.open();
};

// 添加SKU 回调
const pushSKU = (skus) => {
  const result_sku = initAttribute(skus, false);
  matchAndAdd(result_sku, formData.value.goods_sku);
  emit("change", formData.value.goods_sku.length - 1);
};

const inputRefs = ref();
watch(
  () => form.value?.goods_sku?.length,
  (val) => {
    updateSellInfoRefs();
  }
);
const updateSellInfoRefs = () => {
  inputRefs.value = form.value?.goods_sku?.map((_, index) => ref(`inputRef${index}`));
};

const inputFocus = () => {
  const targetIndex = form.value.goods_sku.findIndex((item) => item.main_attribute === 1);
  console.log("targetIndex");
  console.log(targetIndex);

  if (targetIndex !== -1 && inputRefs.value[targetIndex]) {
    nextTick(() => {
      inputRefs.value[targetIndex].value.focus();
    });
  }
};

// 失去焦点判断 自定义SKU 是否重复
const blurCustomSKU = (e) => {};

defineExpose({ validate, editRef, getCreatSku, inputFocus });
</script>

<style lang="scss" scoped>
.uploadBox {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  color: #d1d1d1;
  background-color: #f0f0f0;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
